<template>
	<view class="content">
		<view class="head">

			<cu-custom bgColor="custom-top" :isBack="true" textRight="true" type="custom-recuit">
				<block slot="backText">
					<view class="titilestyle">
						{{title}}
					</view>
				</block>
			</cu-custom>

			<view class="card padding-tb-sm padding-lr flex bg-white flex-direction justify-between">
				<view class="flex item align-center " v-if="shop">
					<!-- 	<view class="radius lg bg-gray logo" :style="{backgroundImage:'url('+shop.logo+')'}">
					</view> -->
					<image class="radius lg bg-gray logo" :src="shop.logo" mode="aspectFill"></image>
					<view class="right margin-left flex flex-direction  justify-around">
						<view class="text-cut text-bold shop-name">{{shop.shop_name || ""}}</view>
						<view class="text-cut text-gray margin-top-sm text-over"><text
								class="cuIcon-locationfill"></text>
							{{shop.address || ""}}
						</view>
					</view>
				</view>
				<view class="grid col-4  margin-top-sm">
					<view class="grid-item  middle flex flex-direction" v-for="(item,index) in pression" :key="index">
						<image :src="resDoam+item.icon" mode="scaleToFill" class=" round"></image>
						<text class="text-xs margin-top-xs">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>


		<view class="bg-white card-box">
			<view class="cu-bar">
				<view class="action  text-bold">
					选择会员套餐
				</view>
			</view>
			<view class="grid col-3 margin-bottom-xl">
				<view class="middle margin-top-sm" v-for="(item,index) in setMeal" :key="index"
					@click="changeSetmeal(index)">
					<view class="grid-card middle padding-sm flex-direction" :class="setmealIndex==index?'hover':''">
						<text class="text-xs basis-xll">{{item.name}}</text>
						<text class="text-price basis padding-tb-xs text-center text-price-color">{{item.price}}</text>
						<text
							class="basis-xll text-price text-center text-discount text-gray">{{item.last_price}}</text>
					</view>


				</view>

			</view>


		</view>


		<text class="buy-desc basis-xll middle ">首次购买需要线下联系工作人员激活会员卡</text>


		<view class="button-box">
			<button class="cu-btn bg-green lg pay-btn" @click="getOrderInfo">立即支付</button>

			<view class="text-gray padding-tb-xs middle margin-top" @click="jumpTo('./record')">购买记录 >></view>
		</view>






	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "充值",
				shop: {
					logo: "",
					shop_name: "",
					address: "",
				},
				resDoam: this.resDomain + "/gym/static/img/",
				pression: [{
						icon: "1.png",
						name: "定期体能测试"
					},
					{
						icon: "2.png",
						name: "器械免费使用"
					},
					{
						icon: "3.png",
						name: "每日不限次数"
					},
					{
						icon: "4.png",
						name: "仅限本人通行"
					}
				],
				setmealIndex: 0,
				setMeal: [],
				paycode: 'wxpay',
				orderInfo: {
					shop: {},
					order_bill: {},
					pay_code: 'wxpay'
				},
				orderPay: null,
				goods_id:-1

			}
		},
		onLoad(option) {
			(option.shop) ? (() => {
				this.shop = JSON.parse(option.shop);
				console.log(this.shop)
				this.getData();
			})() : (() => {
				uni.showModal({
					content: "未找到相关信息，请稍后再试",
					showCancel: false,
					success: () => {
						uni.navigateBack({
							delta: 1
						})
					}
				})

			})();
		},
		onShow() {
			let authorization = uni.getStorageSync('authorization');
			if (authorization) {
				this.getData();
			}

		},
		methods: {
			changeSetmeal(index) {
				this.setmealIndex = index;
				this.goods_id=this.setMeal[this.setmealIndex].goods_id;
			},
			getData() {
				this.apiRequest('/buyer/SportGoods', {
					shop_id: this.shop.shop_id,
				}, 0, 'get').then(res => {
					(res.code == 200) ? (() => {
						this.setMeal = res.data;
						this.changeSetmeal(this.setmealIndex);
						
					})() : "";
				})
			},

			getOrderInfo() {
				this.apiRequest('/buyer/SportOrder', {
					goods_id:this.goods_id
				}, 1).then(res => {
					this.orderPay = res.data
					if (res.code == 200) {
						this.requestPay('wxpay')
					}
				})

			},
			jumpTo(url) {
				
				
				uni.navigateTo({
					url: url
				})
			},
			requestPay(type = 'wxpay') { //默认微信公众号

				uni.requestPayment({ //订单提交成功，发起支付
					provider: 'wxpay',
					appId: this.orderPay.appId,
					timeStamp: String(this.orderPay.timeStamp),
					nonceStr: this.orderPay.nonceStr,
					package: this.orderPay.package,
					signType: this.orderPay.signType,
					paySign: this.orderPay.paySign,
					success: (res) => {
						uni.navigateBack({
							delta: 1
						})
					},
					fail: function(err) {
						uni.showToast({
							icon: "none",
							title: "取消支付或支付失败",
						})
					}
				});
			},



		}


	}
</script>

<style lang="scss">
	.text-discount {
		text-decoration: line-through;
	}

	.line-2 {
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}

	.content {
		$l: calc(100vw*(40/750));
		$w: calc(100vw*(670/750));

		min-height: 100vh;
		position: relative;

		.head {
			width: 100vw;
			min-height: calc(100vw*(380/750));
			position: relative;
			overflow: hidden;

			.card {
				width: $w;
				min-height: calc(100vw*(240/750));
				margin: calc(100vw*(40/750));
				border-radius: 20rpx;

				.item {
					width: inherit;
					height: calc(100vw*(162/750));
					font-size: calc(100vw*(24/750));
					font-weight: 500;
					color: #999999;

					.logo {
						width: calc(100vw*(112/750));
						height: calc(100vw*(112/750));
					}

					.right {
						.shop-name {
							font-size: calc(100vw*(36/750));
							font-weight: 800;
							color: #222327;
						}

						font-size: calc(100vw*(24/750));
						font-weight: 500;
						color: #999999;

						.cuIcon-locationfill {
							color: #29C26D;
						}
					}


				}

				.grid {
					.grid-item {
						image {
							width: calc(100vw*(80/750));
							height: calc(100vw*(80/750));
							background-color: #C9EED2;
						}

						text {
							font-weight: 500;
							color: #999999;
						}

					}
				}
			}

		}

		.head::after {
			content: '';

			width: 140vw;
			height: calc(100vw*(380/750));
			position: absolute;
			top: 0;
			left: -20vw;
			z-index: -1;
			border-radius: 0 0 90% 90%;
			background-color: #323339;
		}

		.card-box {
			width: $w;
			margin-left: $l;
			border-radius: 20rpx;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);

			.cu-bar {
				.action {
					font-size: calc(100vw*(32/750));
					font-weight: 800;
					color: #333333;
				}
			}

			.grid {
				.grid-card {
					width: calc(100vw*(180/750));
					height: calc(100vw*(220/750));
					background: #FDFDFD;
					border: 2rpx solid #DBDBDB;
					border-radius: 20rpx;

					.text-price-color {
						color: #DBA545;
						font-size: 38rpx;
					}

					text {
						word-wrap: break-word;
					}

				}

				.hover {
					background-color: #E4FAEA;
				}

			}
		}

		.pay-btn-box {
			margin-bottom: calc(100vw*(50/750));
		}

		.buy-desc {
			margin-top: calc(100vw*(53/750));
			font-size: calc(100vw*(24/750));
			font-weight: 500;
			color: #999999;
		}


		.button-box {
			margin-top: calc(100vw*(53/750));

			.pay-btn {
				width: $w;
				margin-left: $l;
				height: calc(100vw*(100/750));
				position: relative;

			}
		}



	}
</style>
